import React from 'react';
import { Avatar, Image, Descriptions } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import userImageData from '../data/userImageData';
import { booleanOptions, userTypes, getOptionLabel } from '../data/statusData';

interface UserInfoProps {
  id?: string;
  style?: React.CSSProperties | undefined;
  userData?: any | null | undefined;
}

const UserInfo: React.FC<UserInfoProps> = (props: UserInfoProps) => {
  return (
    <Descriptions
      bordered
      column={1}
    >
      <Descriptions.Item label="用户名">
        {
          props.userData?.avatar ?
            <Avatar
              src={
                <Image
                  src={props.userData?.avatar.startsWith('/') ? props.userData?.avatar : ('/' + props.userData?.avatar)}
                  fallback={userImageData}
                  preview={false}
                />
              }
              size={32}
              style={{ backgroundColor: '#ffffff', position: 'absolute', top: 11 }}
            /> :
            <Avatar
              icon={<UserOutlined style={{ color: '#707070', fontSize: 24 }} />}
              size={32}
              style={{ backgroundColor: '#ffffff', position: 'absolute', top: 11 }}
            />
        }
        <span style={{ paddingLeft: 36 }}>
          {props.userData?.username}
        </span>
      </Descriptions.Item>
      <Descriptions.Item label="姓名">
        {props.userData?.name}
      </Descriptions.Item>
      <Descriptions.Item label="公司">
        {props.userData?.company}
      </Descriptions.Item>
      <Descriptions.Item label="部门">
        {props.userData?.department}
      </Descriptions.Item>
      <Descriptions.Item label="职位">
        {props.userData?.title}
      </Descriptions.Item>
      <Descriptions.Item label="Email">
        {props.userData?.email}
      </Descriptions.Item>
      <Descriptions.Item label="手机">
        {props.userData?.mobile}
      </Descriptions.Item>
      <Descriptions.Item label="电话">
        {props.userData?.telephone}
      </Descriptions.Item>
      <Descriptions.Item label="可用">
        {getOptionLabel(booleanOptions, typeof(props.userData?.active) === 'boolean' ? props.userData?.active.toString() : '')}
      </Descriptions.Item>
      <Descriptions.Item label="锁定">
        {getOptionLabel(booleanOptions, typeof(props.userData?.locked) === 'boolean' ? props.userData?.locked.toString() : '')}
      </Descriptions.Item>
      <Descriptions.Item label="管理员">
        {getOptionLabel(booleanOptions, typeof(props.userData?.superuser) === 'boolean' ? props.userData?.superuser.toString() : '')}
      </Descriptions.Item>
      {
        props.userData?.superuser ? null : (
          <Descriptions.Item label="类型">
            {getOptionLabel(userTypes, props.userData?.type)}
          </Descriptions.Item>
        )
      }
    </Descriptions>
  );
};

export default UserInfo;
